<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
  </head>
  <body>
    <!-- 
    路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，
    如果点击页面上的about 按钮，页面中就要显示about 的内容。
    Home按钮  => home 内容， about按钮 => about 内容，也可以说是一种映射. 
    所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。 

    类似于链接：<a href="abc.html">我们要跳转的页面</a>

    在vue中使用路由一定要引用库：

    -->

    <div id="box">
      <p>
        <!-- 我们可以使用router-link组件来进行导航 -->
        <!-- 通过传入to属性指定链接 -->
        <!-- router-link 默认就会渲染成一个a标签 -->
        <router-link to="/home">home</router-link>
        <router-link to="/news">news</router-link>
      </p>
      <!-- 定义一个路由的出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>

    <template id="home">
      <div>
        <h2>首页</h2>
        <router-link to="/home/login">登录</router-link>
        <router-link to="/home/reg">注册</router-link>
      </div>
      <router-view></router-view>
    </template>

    <template id="login">
      <div>登录界面</div>
    </template>

    <template id="reg">
      <div>注册</div>
    </template>

    <template id="news">
      <div>新闻</div>
    </template>

    <script>
      //1.定义路由组件
      const Home = { template: "#home" };
      const News = { template: "#news" };
      const Login = { template: "#login" };
      const Reg = { template: "#reg" };

      //2.定义路由
      //每个路由应该映射为一个组件
      const routes = [
        {
          path: "/",
          redirect: "/home"
        },

        {
          path: "/home",
          component: Home,
          children: [
            {
              path: "/home/login",
              component: Login
            },
            {
              path: "/home/reg",
              component: Reg
            }
          ]
        },

        {
          path: "/news",
          component: News
        }
      ];

      //3.创建一个router的实例(对象)，然后将上面定义的路由routes进行配制
      const router = new VueRouter({
        routes //相当于routes:toutes
      });

      // 4.创建和挂载根实例
      // 我们要通过router配置参数注入路由，从而让整个应用都有路由的功能
      var demo = new Vue({
        el: "#box",
        data: {},
        //要将路由添加到vue中
        router
      });
    </script>
  </body>
</html>
